<template>
    <div class="catalog">
        <div class="operate">
            <el-button type="primary" @click="addUser">添加用例</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入关键字查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>   
        </div>
        <div class="catalogTable">
            <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
                <el-table-column label="主题" sortable>
                    <template #default="scope">
                        <el-icon><component :is="scope.row.icon" /></el-icon>
                        <span style="margin-left: 8px;">{{ scope.row.topic }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="路径" sortable />
                <el-table-column prop="createTime" label="更改时间" sortable />
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" size="small" :disabled="scope.row.isParent != '1'" @click="handleAddClick(scope)">添加</el-button>
                        <el-button type="primary" size="small" @click="handleClick(scope)">修改</el-button>
                        <el-button type="danger" size="small" @click="deleteClick(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="100px">
                    <el-form-item label="主题">
                        <el-input v-model="fromData.topic" />
                    </el-form-item>
                    <el-form-item label="路径">
                        <el-input v-model="fromData.path" />
                    </el-form-item>
                    <el-form-item label="是否为父节点">
                        <el-radio-group v-model="fromData.isParent">
                            <el-radio label='0' size="large" :disabled="disabledradio">不是父节点</el-radio>
                            <el-radio label='1' size="large" :disabled="disabledradio">是父节点</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择父节点" v-if="fromData.isParent == '0'">
                        <el-select v-model="fromData.pid" placeholder="选择">
                            <el-option v-for="(item,index) in ParentChild" :key="index" :label="item.topic" :value="item.id">{{ item.topic }}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图标">
                        <el-select v-model="fromData.icon" placeholder="选择图标">
                            <el-option v-for="(item,index) in icons" :key="index" :value="item.title"><el-icon><component :is="item.title"/></el-icon>---{{ item.title }}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权用户" >
                        <el-checkbox-group v-model="fromData.umasses">
                            <el-checkbox v-for="(item,index) in rolesList" :key="index" :label="item.id" name="type">{{ item.topic }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="简介">
                        <el-input v-model="fromData.descrs" placeholder="请输入简介，后期查找就是靠这里查找" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="drawer=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import AllIcon from '@/util/icons'
import roles from '@/util/roles'
export default defineComponent({
    data(){
        return{
            searchName:'',
            disabledradio:false,
            user:null,
            tableData:[],
            RoleSelect:true,
            icons:[],
            rolesList:[],
            drawer:false,
            Title:"添加",
            ParentChild:[],
            fromData:{
                "id": 2,
                "topic": "zheshi",
                "path": "/sdsd",
                "isParent": '0',
                "pid": 0,
                "icon": "<Histogram />",
                "descrs": "sdsd",
                "createTime": "2023-11-15T16:00:00.000+00:00",
                "umasses": ['0', ',', '1']
            }
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.rolesList = roles;
        this.user = this.store.state.UserMessage;
        this.icons = AllIcon;
        this.LoadData();
    },
    methods:{
        LoadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/catalog/selectAllManage`).then(res=>{
              self.tableData = res.data;
              self.filterChild(res.data);
            })
        },
        filterChild(data){
            let self = this;
            self.ParentChild = data.filter((d)=>{return d.isParent==1;})
        },
        search(){
            let self = this;
            self.$http.get(`${self.baseUrl}/catalog/selectName?descrs=${self.searchName}&identify=${self.user.Identify}`).then(res=>{
              self.tableData = res.data;
            })
        },
        addUser(){
            this.drawer = true;
            this.Title = "添加"
            this.RoleSelect = true;
            this.fromData = this.initial();
            this.disabledradio = false;
        },
        onSubmit(){
            let self = this;
            self.fromData.isParent = parseInt(self.fromData.isParent);
            self.fromData.umasses = self.fromData.umasses.join(',');
            if(self.Title == "添加"){
                self.$http.post(`${self.baseUrl}/catalog/addCatalog`,self.fromData).then(res=>{
                    if(res.data==1){
                        ElMessage({
                            message:"添加成功",
                            type:'success'
                        })
                        self.LoadData();
                    }
                })
            }else{
                self.$http.post(`${self.baseUrl}/catalog/updataCatalog`,self.fromData).then(res=>{
                    if(res.data==1){
                        ElMessage({
                            message:"修改成功",
                            type:'success'
                        })
                        self.LoadData();
                    }
                })
            }
            self.drawer = false;
        },
        handleAddClick(res){
            this.drawer = true;
            this.Title = "添加";
            this.fromData = this.initial();
            this.fromData.pid = res.row.id;
            this.fromData.isParent = "0";
            this.disabledradio = true;
        },
        handleClick(res){
            this.drawer = true;
            this.Title = "修改";
            this.RoleSelect = true;
            if(!Array.isArray(res.row.umasses)) res.row.umasses = this.dealPoint(Array.from(res.row.umasses));
            res.row.isParent = res.row.isParent + '';
            if(res.row.children!=null && res.row.children.length>0) this.RoleSelect = false;
            this.fromData = res.row;
        },
        deleteClick(res){
            let self = this;
            ElMessageBox.confirm(`确定要删除${res.row.topic}主题吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/catalog/deleteCatalog?id=${res.row.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        dealPoint(d){
            for(let i=0;i<d.length;i++){
                if(d[i]==','){
                    d.splice(i,1)
                }
            }
            return d;
        },
        initial(){
            return {
                topic:'',
                path:'',
                isParent:'',
                pid:'',
                icon:'',
                umasses:[],
                descrs:'',
            }
        }
    }
})
</script>
<style scoped>
    .el-table{
        width: 100%;
        height: calc(576px - 15px);
    }
    .catalogTable{
        margin-top: 16px;
    }
    .search{
        float: right;
    }
</style>